@mixin titleComm {
  @apply text-white mb-4 font-normal;
  font-size: 1.875rem;
}

.sportHome {
  @apply relative w-screen;
  min-height: 100vh;

  .sportBg {
    @apply w-screen relative cursor-pointer;
    height: 29.6875vw;

    .cp {
      @apply absolute left-2/4 text-white text-4xl;
      line-height: 3rem;
      top: 20.877%;
      transform: translateX(-50%);
      font-family: 'SimHei', '黑体', sans-serif;
    }

    .cpTitle {
      @apply font-bold absolute left-2/4 text-white whitespace-nowrap;
      top: 39.824%;
      transform: translateX(-50%);
      line-height: 3.75rem;
      font-family: 'SimHei', '黑体', sans-serif;
      font-size: 2.5rem;
    }

    .cpDate {
      @apply absolute left-2/4 text-white;
      top: 63.596%;
      transform: translateX(-50%);
      font-size: 1.625rem;
    }

    .teamBanner {
      @apply absolute left-2/4 flex justify-center items-center;
      top: 34.824%;
      transform: translateX(-50%);
      height: 7.5rem;

      .img {
        @apply relative;
        width: 7.5rem;
        height: 7.5rem;

        img {
          @apply w-full h-full;
          border-radius: 50%;
        }

        &::before {
          @apply text-2xl w-fit absolute left-2/4 leading-9 text-white whitespace-nowrap;
          content: attr(data-name);
          bottom: -2.875rem;
          transform: translateX(-50%);
          font-family: 'SimHei', '黑体', sans-serif;
        }
      }

      .vs {
        @apply font-bold text-white;
        font-size: 3.75rem;
        font-family: OPPOSans;
        margin: 0 8.375rem;
      }
    }

    .img {
      @apply w-full h-full;
    }

    &::after {
      @apply absolute left-0 bottom-0 w-full bg-linear-banner;
      content: '';
      height: 29.372%;
    }

    .projectBox {
      @apply absolute left-0;
      bottom: -2.9375rem;
      z-index: 2;
    }
  }

  .hotTitle {
    @include titleComm;
    margin-top: 5.75rem;
  }

  .hotRaceTitle {
    @include titleComm;
    margin-top: 2.875rem;
  }

  .myRace {
    @include titleComm;
    margin-top: 2.875rem;
  }
}

@media screen and (max-width: 767px) {
  .sportHome {
    .bannerPhone {
      @apply w-auto;
      margin-top: 5.875rem;
      height: 11.25rem;

      .cp {
        top: 10.877% !important;
        line-height: 3rem;
        font-size: 1rem !important;
      }

      .cpTitle {
        @apply w-full leading-6 text-lg text-center;
        top: 40% !important;
        white-space: wrap;
      }

      .cpDate {
        @apply text-white text-sm;
        top: 70%;
      }

      .teamBanner {
        @apply absolute left-2/4 flex justify-center items-center;
        top: 32.824%;
        transform: translateX(-50%);
        height: 3.75rem;

        .img {
          @apply relative;
          width: 3.75rem;
          height: 3.75rem;

          img {
            @apply w-full h-full;
            border-radius: 50%;
          }

          &::before {
            @apply text-xs leading-9;
            bottom: -1.875rem;
          }
        }

        .vs {
          font-size: 1.875rem;
          margin: 0 3.75rem;
        }
      }
    }

    .projectPhone {
      @apply px-5 rounded-lg flex items-center flex-nowrap overflow-x-auto;
      width: calc(100% - 2rem);
      height: 5.5rem;
      margin: 0 auto 0.3125rem;
      background-color: #242424;

      .items {
        @apply flex flex-col text-center justify-center items-center text-xs whitespace-nowrap;
        color: rgba(255, 255, 255, 0.8);
        line-height: 1.125rem;

        &:not(:first-child) {
          @apply ml-8;
        }

        .img {
          width: 1.625rem;
          height: 1.625rem;
          margin-bottom: 0.375rem;
        }
      }
    }

    .switchTab {
      @apply w-full flex text-base px-4;
      height: 3.125rem;
      color: rgba(255, 255, 255, 0.8);

      .item {
        @apply h-full flex-1 text-center;
        font-family: 'SimHei', '黑体', sans-serif;
        line-height: 3.125rem;

        &.itemActive {
          @apply text-theme;
        }
      }
    }

    .commData {
      @apply block rounded-lg text-center overflow-hidden;
      width: calc(100% - 2rem);
      height: 6.75rem;
      background-image: url('/images/hot_bg.png');
      background-size: 100% 100%;
      margin: 0 auto 0.625rem;

      .date {
        @apply text-xs text-white;
        line-height: 1.125rem;
        margin: 0.75rem 0 0.125rem 0;
      }

      .title {
        @apply text-xs text-white opacity-60;
        line-height: 1.125rem;
        margin-bottom: 1.125rem;
      }

      .teams {
        @apply h-8 text-base flex justify-center items-center text-white;

        .name {
          @apply text-sm;
        }

        .img {
          @apply w-8 h-8;
          border-radius: 50%;

          &.imgLeft {
            margin-left: 0.4375rem;
            margin-right: 0.625rem;
          }

          &.imgRight {
            margin-left: 0.625rem;
            margin-right: 0.4375rem;
          }
        }

        .score {
          @apply font-bold;
          font-family: OPPOSans;
        }

        .status {
          @apply text-xs whitespace-nowrap;
          color: rgba(255, 255, 255, 0.6);
          margin: 0 1.0625rem;
        }
      }
    }

    .commHotRace {
      @apply rounded-lg h-32 overflow-hidden;
      width: calc(100% - 2rem);
      margin: 0.625rem auto 0;
      background: #242424;

      .hTitle {
        @apply text-sm text-white mt-3 mb-3 ml-4;
      }

      .hotBox {
        @apply flex flex-nowrap;
        overflow-x: auto;
        overflow-y: hidden;

        &::-webkit-scrollbar {
          @apply w-0 h-0;
        }

        .item {
          @apply flex flex-col items-center text-xs;
          height: 4.9375rem;
          min-width: 4.5rem;
          color: rgba(255, 255, 255, 0.8);
          line-height: 1.125rem;

          & > img {
            @apply w-10 h-10;
            margin-bottom: 0.4375rem;
          }
        }
      }
    }
  }
}
